<!-- eslint-disable vue/html-indent  -->
<template>
  <g>
    <text
      x="50"
      y="30"
      :rotate="props.rotate"
      :transform="props.rotate === -90 ? 'rotate(90, 70, 20)' : ''"
      :font-family="props.fontFamily"
      :font-size="props.fontSize"
      :fill="props.fill"
      >{{ props.text }}
    </text>
  </g>
</template>
<script setup lang="ts">
  const props = defineProps({
    fontFamily: {
      type: String,
      default: ''
    },
    fontSize: {
      type: Number,
      default: 10
    },
    rotate: {
      type: Number,
      default: 0
    },
    text: {
      type: String,
      default: ''
    },
    fill: {
      type: String,
      default: ''
    }
  });
</script>
